<template>
  <el-dropdown trigger="click" class="international" @command="handleSetLanguage">
    <div class="icon">
      <el-tooltip :content="$t('msg.navBar.lang')" :effect="effect">
        <!-- <div class="icons">
          <span class="zh">中</span>
          <span class="en">A</span>
        </div> -->
        <svg t="1653295231312" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
          p-id="2493" width="23" height="23">
          <path
            d="M651.3 390.041h325.224a47.76 47.76 0 0 1 46.623 48.897v536.165A47.76 47.76 0 0 1 976.524 1024H419.322a47.76 47.76 0 0 1-46.623-48.897V633.959H46.907A47.76 47.76 0 0 1 0.284 585.062V48.897A47.76 47.76 0 0 1 46.907 0h557.77A47.76 47.76 0 0 1 651.3 48.897zM46.907 585.061h557.77V48.898H46.907v536.165z m635.665-16.488l-102.343 278.6h45.485l25.018-71.64h113.714l25.018 71.64h43.78l-102.912-278.6z m-22.175 170.572l44.35-126.223 47.19 126.223z m-354.22-625.43h35.251v71.071h135.32v188.198h-35.251V350.81H341.428V481.58h-33.546V350.81h-97.226v22.174h-35.251V184.786h132.477z m-95.52 200.706h96.657v-93.246h-96.658z m130.771 0h100.069v-93.246H341.428z"
            p-id="2494" fill="#2d3a4b"></path>
        </svg>
      </el-tooltip>
    </div>
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item :disabled="language === 'zh'" command="zh">
          中文
        </el-dropdown-item>
        <el-dropdown-item :disabled="language === 'en'" command="en">
          English
        </el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
</template>

<script setup>
import { useI18n } from 'vue-i18n'
import { defineProps, computed } from 'vue'
import { useStore } from 'vuex'
// import { ElMessage } from 'element-plus'
// import { ArrowDownBold } from '@element-plus/icons-vue'

defineProps({
  effect: {
    type: String,
    default: 'dark',
    validator: function (value) {
      // 这个值必须匹配下列字符串中的一个
      return ['dark', 'light'].indexOf(value) !== -1
    }
  }
})

const store = useStore()
const language = computed(() => store.getters.language)

// 切换语言的方法
const i18n = useI18n()
const handleSetLanguage = lang => {
  i18n.locale.value = lang
  store.commit('setLanguage', lang)
//   ElMessage.success(i18n.t('msg.toast.switchLangSuccess'))
}
</script>
<style lang="scss" scoped>
.icon {
  position: relative;

  .icons {
    position: absolute;
    top: -2px;
    left: -2px;
    cursor: pointer;

    .zh {
      display: inline-block;
      width: 10px;
      height: 10px;
      border: 1px solid rgb(99, 99, 99);
      font-size: 10px;
      background: #fff;
      text-align: center;
      line-height: 10px;
      position: absolute;
      top: 3px;
      left: 3px;
      z-index: 999;
    }

    .en {
      display: inline-block;
      width: 10px;
      height: 10px;
      font-size: 10px;
      background: rgb(99, 99, 99);
      text-align: center;
      line-height: 10px;
      color: #fff;
      position: absolute;
      top: 12px;
      left: 12px;
    }
  }
}
</style>

